<template>
  <div class="chat-container">
    <div class="chat_left-container">
      <ChatHistory />
    </div>
    <div class="chat_right-container">
      <div class="right_top-container z-pd-10">
        <span>设置智能者身份</span>
      </div>
      <div class="right_body-container">
        <div class="body_title-container z-pd-t-50 z-pd-b-50">
          AI聚合平台-v1.0.0
        </div>
        <div class="body_use-container">
          <div class="use_item-container" v-for="n in 3" :key="n">
            <div class="item_top-container">
              <i-ep-Promotion class="z-ma-b-10 item_icon" />
              <div class="z-ma-b-20">小试牛刀</div>
            </div>
            <div class="item_desc-container z-pd-10 z-ma-b-10">
              用小学生都能听懂的术语解释什么是量子纠缠
            </div>
            <div class="item_desc-container z-pd-10 z-ma-b-10">
              用小学生都能听懂的术语解释什么是量子纠缠
            </div>
            <div class="item_desc-container z-pd-10 z-ma-b-10">
              用小学生都能听懂的术语解释什么是量子纠缠
            </div>
          </div>
        </div>
       
      </div>
      <MyChatBottom />
    </div>
    
  </div>
</template>

<script lang="ts" setup name="Chat">
  const ChatHistory = defineAsyncComponent(
    () => import("./components/ChatHistory.vue")
  );
  const MyChatBottom = defineAsyncComponent(
    () => import("@/components/MyChatBottom/MyChatBottom.vue")
  );
</script>

<style lang="scss" scoped>
  .chat-container {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    height: 100%;
    .chat_left-container {
      width: 250px;
      box-sizing: border-box;
      flex-shrink: 0;
    }
    .chat_right-container {
      flex: 1 1 auto;
      box-sizing: border-box;
      position: relative;
      .right_top-container {
        display: flex;
        justify-content: center;
        border-bottom: 1px solid var(--el-border-color);
      }
      .right_body-container {
        
        .body_title-container {
          text-align: center;
          font-weight: bold;
          font-size: 2rem;
        }
        .body_use-container {
          display: flex;
          justify-content: space-around;
          .use_item-container {
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            .item_icon {
              font-size: 1.8rem;
            }
            .item_top-container {
              text-align: center;
            }
            .item_desc-container {
              background-color: var(--el-text-color-disabled);
              border-radius: 6px;
              color: var(--el-text-color-regular);
            }
          }
        }
      }
    }
  }
</style>
